import React, { useEffect, useState } from 'react';
import { Button, Drawer } from 'antd';
import Editor from '@/utils/Editor';
let ueditor = null;
import UserSession from "@/UserSession";

const AddAnswer = props => {
  function save() {
    const answer = ueditor.getUeditorContent();
    props.save(answer);
  }

  function quoteAnswer() {
    props.addAnswer(1);
  }

  return (
    <Drawer
      title={props.context ? '新增答案' : '编辑答案'}
      placement="right"
      closable={false}
      onClose={props?.onClose}
      visible={props?.visible}
      width={600}
    >
      {props.visible ? (
        <div>
          {UserSession.isSystemDataKnowledge() ? null : (
            <div style={{ overflow: 'hidden' }}>
              <Button style={{ margin: 10, float: 'right' }} type="primary" size="small" icon="plus" onClick={quoteAnswer}>引用答案</Button>
            </div>
          )}
          <Editor
            content={props?.content ? props.content : ''}
            name="answer"
            id="answer"
            width={550}
            ref={r => (ueditor = r)}
          />
        </div>
      ) : ('')}
      <div
        style={{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 99999999,
        }}
      >
        <Button onClick={props?.onClose} style={{ marginRight: 8 }}>取消</Button>
        <Button onClick={save} type="primary">保存</Button>
      </div>
    </Drawer>
  );
};

export default AddAnswer;
